<template>
	<view>
		<!-- 选择日期 -->
		<!--    <view class="h-96 color-d font-28 flex-between back-color-c p-l-30 p-r-30">
      <view class="font-weight-600">2022年6月</view>
      <view @click="picker_show = true">选择月份</view>
    </view> -->
	<view v-if="revenue.contract_status === 0">
		<view class="p-l-30 m-t-60 p-r-30">
			<!-- <view class="df col-center back-color-b radius-16 h-140"> -->
			<view class="flex back-color-b p-l-20 p-t-26 p-r-20 p-b-26 radius-16 m-t-30">
				<view class="flex-col flex-1">
					<text class="color-c font-32 font-weight-500">合同签约(月)</text>
				</view>
				<view class="flex-col flex-1  col-bottom ">
					<text class="color-c font-32 font-weight-500">{{revenue.contract_cycle}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="flex-between p-l-32 p-r-30 m-t-36" v-if="isObjNone(revenue)">
			<view class="df fdc col-center row-center radius-16 back-color-c w-314 h-220">
				<text class="color-b font-76">{{numFormat(revenue.price_per_day)}}</text>
				<text class="font-24 color-d m-t-16">预计日租金(元/日)</text>
			</view>
			<view class="df fdc col-center row-center radius-16 back-color-c w-314 h-220">
				<text class="color-b font-76">{{numFormat(revenue.price_per_month)}}</text>
				<text class="font-24 color-d m-t-16">预计月租金(元/月)</text>
			</view>
		</view>
		
		<view class="p-l-30 m-t-60 p-r-30">
			<view class="flex-between">
				<view class="font-32 color-d font-weight-600 m-b-30">预计改造成本</view>
			</view>
			<view class="df col-center back-color-c radius-16 h-160">
				<view class="df fdc col-center row-center flex-1">
					<text class="font-36 color-d font-weight-500">{{numFormat(revenue.transform_price)}}</text>
					<text class="font-25 color-a">改造单价/m²</text>
				</view>
				<view class="w-2 h-40 back-color-g"></view>
				<view class="df fdc col-center row-center flex-1">
					<text class="font-36 color-d font-weight-500">{{numFormat(revenue.area)}}</text>
					<text class="font-25 color-a">项目面积/m²</text>
				</view>
				<view class="w-2 h-40 back-color-g"></view>
				<view class="df fdc col-center row-center flex-1">
					<text class="font-36 color-d font-weight-500">{{numFormat(revenue.transform_amount)}}</text>
					<text class="font-25 color-a">改造总价/元</text>
				</view>
			</view>
		</view>
		<!-- <view class="p-l-30 m-t-60 p-r-30">
			
			<view class="df col-center back-color-c radius-16 h-160">
				<view class="df fdc col-center row-center flex-1">
					<text class="font-25 color-a">京瑞居承担</text>
					<text class="font-36 color-d font-weight-500">{{numFormat(revenue.platform_cost)}}</text>
				</view>
				<view class="w-2 h-40 back-color-g"></view>
				<view class="df fdc col-center row-center flex-1">
					<text class="font-25 color-a">业主承担</text>
					<text class="font-36 color-d font-weight-500">{{numFormat(revenue.own_cost)}}</text>
				</view>
				<view class="w-2 h-40 back-color-g"></view>
				<view class="df fdc col-center row-center flex-1">
					<image src="@/static/images/user/ic_shejifangan@2x.png" class="w-100 h-100" mode=""></image>
				</view>
			</view>
		</view> -->
		
		
		<view class="p-l-30 m-t-60 p-r-30">
			<view class="flex-between">
				<view class="font-32 color-d font-weight-600 m-b-30">数据安全已上区块链</view>
			</view>
			<view class="df col-center back-color-c radius-16">
				<view class="df fdc col-center row-center flex-1 p-l-32 p-r-30 m-t-36 m-b-30">
					<text class="font-30 color-j" v-html="revenue.data_content"></text>
				</view>
			
			</view>
		</view>
	</view>

	<view v-if="revenue.contract_status === 1">
		<view class="flex-between p-l-32 p-r-30 m-t-36" v-if="isObjNone(revenue)">
			<view class="df fdc col-center row-center radius-16 back-color-c w-314 h-220">
				<text class="color-b font-40"> <text class="font-76 font-weight-500">{{revenue.in_number_days}}</text>
					/{{dayNum}}</text>
				<text class="font-24 color-d m-t-16">出租率</text>
			</view>
			<view class="df fdc col-center row-center radius-16 back-color-c w-314 h-220" v-show="false">
				<text class="color-b font-40"> <text
						class="font-76 font-weight-500">{{(revenue.forecast_earnings / 10000).toFixed(2)}}</text>
					万元</text>
				<text class="font-24 color-d m-t-16">本年预估总收益</text>
			</view>
		</view>

		<!-- 本月总收益 -->
		<view class="p-l-30 m-t-60 p-r-30">
			<view class="flex-between">
				<view class="font-32 color-d font-weight-600 m-b-30">上月收益</view>
				<view class="color-b font-28 font-weight-500 flex" @click="picker_show = true" v-show="false">{{timeStr}}
					<image src="@/static/images/user/ic_rili@2x.png" class="w-32 h-32 m-l-8" mode=""></image>
				</view>
			</view>
			<view class="df col-center back-color-c radius-16 h-140">
				<view class="df fdc col-center row-center flex-1">
					<text class="font-36 color-d font-weight-500">{{(revenue.in_number_guarant_income+revenue.in_number_amount).toFixed(2)}}</text>
<!--					<text class="font-36 color-d font-weight-500">{{numFormat(revenue.in_number_total_revenue+revenue.in_number_guarant_income+revenue.in_number_amount)}}</text>-->
					<text class="font-24 color-a">总收益</text>
				</view>
				<view class="w-2 h-40 back-color-g"></view>
				<view class="df fdc col-center row-center flex-1">
					<text class="font-36 color-d font-weight-500">{{revenue.in_number_guarant_income}}</text>
					<text class="font-24 color-a">保底收益</text>
				</view>
				<view class="w-2 h-40 back-color-g"></view>
				<view class="df fdc col-center row-center flex-1">
					<text class="font-36 color-d font-weight-500">{{revenue.in_number_amount}}</text>
					<text class="font-24 color-a">分红收益</text>
				</view>
			</view>
		</view>
	</view>

		<Picker :show="picker_show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="cancel"
			@change="changeHandler" />
	</view>
</template>

<script>
	import Picker from '@/components/picker/Picker'
	export default {
		name: 'totalRevenue',
		components: {
			Picker
		},
		data() {
			return {
				picker_show: false,
				columns: [],
				columnData: [],
				timeStr: '',
				time: '',
				revenue: {},
				fullYear: '',
				month: "",
			}
		},
		onLoad() {
			this.init();
		},
		computed: {
			dayNum() {
				//return new Date(this.fullYear, this.month, 0).getDate()
				let time = new Date()
				let month = time.getMonth() === 0 ? 1 : time.getMonth(),
					year = time.getMonth() === 0 ? time.getFullYear() - 1 : time.getFullYear()
				return new Date(year, month, 0).getDate()
			}
		},
		methods: {
			async getHousingTotalRevenue(times) {
				const res = await this.$api.common.landlord('getHousingTotalRevenue', {
					time: Math.round(new Date(times) / 1000),
					assets_id: ''
				})
				if (res.code === 200) {
					this.revenue = res.data
				}
			},
			init() {
				let month = [],
					years = []
				for (let i = 1; i < 13; i++) {
					month.push(i < 10 ? '0' + i : i)
				}
				for (let i = 1970; i <= new Date().getFullYear(); i++) {
					years.push(i);
					this.columnData.push(month);
				}
				years.unshift('', '', '')
				years.push('', '')
				month.unshift('', '', '')
				month.push('', '')
				this.columns.push(years)
				this.columns.push(month)
				this.$nextTick(() => {
					this.$refs.uPicker.confirm()
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.timeStr = `${e.years}年${e.month}月`
				this.fullYear = e.years
				this.month = e.month
				this.time = `${e.years}-${e.month}`
				this.getHousingTotalRevenue(this.time)
				this.picker_show = false
			},
			cancel() {
				this.picker_show = false
			},
			getLastMonth() {
				var date = new Date();
				var year = date.getFullYear(); //当前年：四位数字
				var month = date.getMonth(); //当前月：0-11

				if (month == 0) { //如果是0，则说明是1月份，上一个月就是去年的12月
					year -= 1;
					month = 12;
				}

				month = month < 10 ? ('0' + month) : month; //月份格式化：月份小于10则追加个0

				let lastYearMonth = year + '-' + month;

				return lastYearMonth;
			},
			getMonth() {
				var date = new Date();
				var year = date.getFullYear(); //当前年：四位数字
				var month = date.getMonth() + 1; //当前月：0-11
				month = month < 10 ? ('0' + month) : month; //月份格式化：月份小于10则追加个0
				let lastYearMonth = year + '-' + month;
				return lastYearMonth;
			},
		}
	}
</script>

<style>
</style>
